{% extends './base.html' %}
{% block title %}
<title>{{page_title}}-購物車</title>
<link rel="stylesheet" href="/public/assets/new/plugins/jquery-steps/css/custom-jquery.steps.css">
<style>
    .filter-list li {

            display: block!important;
            width: 100%;

    }
    input:focus-visible {

        outline: none;
    }
</style>

{% endblock %}
{% block body %}

<link rel="stylesheet" href="/public/assets/new/plugins/jquery-steps/css/custom-jquery.steps.css">
<link rel="stylesheet" href="/public/assets/common/selectFilter.css">
<script src="/public/assets/common/selectFilter.js"></script>
  


    <!--=== Breadcrumbs v4 ===-->
    <div class="breadcrumbs-v4">
        <div class="container">
            <span class="page-name">購物車</span>
            <!-- <h1>購物車 <span class="shop-green"></span></h1> -->
            <ul class="breadcrumb-v4-in">
                <li><a href="/">首頁</a></li>
                <li><a href=/shop/goods"">產品列表</a></li>
                <li class="active">購物車</li>
            </ul>
        </div><!--/end container-->
    </div> 
    <!--=== End Breadcrumbs v4 ===-->

    <!--=== Content Medium Part ===-->
    <div class="content-md margin-bottom-30">
        <div class="container">
            <form class="shopping-cart" action="#">
                <div>
                    <div class="header-tags">            
                        <div class="overflow-h">
                            <h2>購物車</h2>
                            <p>檢查 &amp; 編輯購物車</p>
                            <i class="rounded-x fa fa-check"></i>
                        </div>    
                    </div>
                    <section>
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>產品</th>
                                        <th>單價</th>
                                        <th>數量</th>
                                        <th>總價</th>
                                    </tr>
                                </thead>
                                <tbody>
                                  {% for goods in cart %}
                                    <tr class="cart-item" id="cart_{{goods.id}}">
                                        <td class="product-in-table">
                                          
                                            <img class="img-responsive" src="{{goods.imgurl}}" alt="">
                                            <div class="product-it-in">
                                                <h3><a href="/shop/goods/{{goods.goodsID}}" class="c-p">{{goods.name}}</a></h3>
                                                <span>{{goods.title}}</span>
                                            </div>    
                                        </td>
                                        <td class="g-price">NTD${{goods.price}}</td>
                                        <td>
                                            <button type='button' class="quantity-button" name='subtract' onclick='subtractQty("{{goods.goodsID}}")' value='-'>-</button>
                                            <input type='text' class="quantity-field" name='qty1' value="{{goods.num}}" onblur="updateQty('{{goods.goodsID}}','{{goods.price}}',this)" />
                                            <button type='button' class="quantity-button" name='add' onclick='plusQty("{{goods.goodsID}}")' value='+'>+</button>
                                        </td>
                                        <td class="shop-red">NTD${{goods.price*goods.num}}</td>
                                        <td>
                                            <button type="button" class="close"><span>&times;</span><span class="sr-only">Close</span></button>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </section>
                    
                    <div class="header-tags">
                        <div class="overflow-h">
                            <h2>訂單信息</h2>
                            <p>請填寫地址信息</p>
                            <i class="rounded-x fa fa-home"></i>
                        </div>    
                    </div>
                    <section class="billing-info">
                        <div class="row">
                            <div class="col-md-6 md-margin-bottom-40">
                                <h2 class="title-type">賬單信息</h2>
                                <div class="billing-info-inputs checkbox-list">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <input id="bill-name" type="text" placeholder="姓名" name="firstname" class="form-control required">
                                        </div>
                                        <div class="col-sm-6">
                                            <input id="bill-phone" type="tel" placeholder="電話" name="phone" class="form-control required">
                                        </div>
                                    </div>
                                    <input id="bill-address" type="text" placeholder="詳細地址" name="address2" class="form-control required">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <input id="bill-city" type="text" placeholder="城市" name="city" class="form-control required">
                                        </div>
                                        <div class="col-sm-6">
                                            <input id="bill-zip" type="text" placeholder="郵編" name="zip" class="form-control required">
                                        </div>
                                    </div>
                                    <div class="row h-55 p-t-15">
                                        <div class="col-sm-12">
                                            <!-- <textarea id="bill-address" placeholder="地址" name="address" class="form-control required"></textarea> -->
                                            <a id="syncbtn" class=" c-p">將賬單信息同步至取貨信息</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 md-margin-bottom-40">
                                <h2 class="title-type f-b-c">
                                    <span>
                                        取貨信息
                                    </span>
                                    <div class="filter-box">
                                        <div class="filter-text f-s-c">
                                            <span class="f-s-0 c-333 f-s-14">代存：</span>
                                            <input class="filter-title f-1" type="text" readonly placeholder="pleace select" />
                                            <i class="f-s-0 icon icon-filter-arrow"></i>
                                        </div>
                                        <select name="filter">
                                            <option value="0">711（篤勝門市）</option>
                                            <option value="1">711（竹城門市）</option>
                                            <option value="2">全家（大東路店）</option>
                                            <option value="3">全家（天山店）</option>
                                            <option value="4">全家（民雄神農店）</option>
                                        </select>
                                    </div>
                                </h2>
                                <div class="billing-info-inputs checkbox-list">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <input id="addr-name" type="text" placeholder="姓名" name="firstname" class="form-control required">
                                        </div>
                                        <div class="col-sm-6">
                                            <input id="addr-phone" type="tel" placeholder="電話" name="phone" class="form-control required">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <input id="addr-city" type="text" placeholder="城市" name="city" class="form-control required">
                                        </div>
                                        <div class="col-sm-6">
                                            <input id="addr-zip" type="text" placeholder="郵編" name="zip" class="form-control required">
                                        </div>
                                    </div>
                                    <input id="addr-address" type="text" placeholder="詳細地址" name="address2" class="form-control required">
                                    <input id="addr-desc" type="text" placeholder="取貨備註" name="address3" class="form-control required">
                                </div>
                            </div>
                        </div>       
                    </section>
                        
                    <div class="header-tags">
                        <div class="overflow-h">
                            <h2>支付</h2>
                            <p>請支付您的訂單</p>
                            <i class="rounded-x fa fa-credit-card"></i>
                        </div>    
                    </div>
                    <section>
                        <div class="row">
                            <div class="col-md-12 md-margin-bottom-50">
                                <h2 class="title-type">請掃碼支付(<span class="order-num c-red">--</span>)</h2>
                                <!-- Accordion -->
                                <div class="accordion-v2 t-c">
                                    <!-- <div class="panel-group" id="accordion">
                                        <div class="panel panel-default">
                                            <div class="panel-heading">
                                                <h4 class="panel-title">
                                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                                        <i class="fa fa-credit-card"></i>
                                                        Credit or Debit Card
                                                    </a>
                                                </h4>
                                            </div>
                                            <div id="collapseOne" class="panel-collapse collapse in">
                                                <div class="panel-body cus-form-horizontal">
                                                    <div class="form-group">
                                                        <label class="col-sm-4 no-col-space control-label">Cardholder Name</label>
                                                        <div class="col-sm-8">
                                                            <input type="text" class="form-control required" name="cardholder" placeholder="">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-4 no-col-space control-label">Card Number</label>
                                                        <div class="col-sm-8">
                                                            <input type="text" class="form-control required" name="cardnumber" placeholder="">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-4 no-col-space control-label">Payment Types</label>
                                                        <div class="col-sm-8">
                                                            <ul class="list-inline payment-type">
                                                                <li><i class="fa fa-cc-paypal"></i></li>
                                                                <li><i class="fa fa-cc-visa"></i></li>
                                                                <li><i class="fa fa-cc-mastercard"></i></li>
                                                                <li><i class="fa fa-cc-discover"></i></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-4">Expiration Date</label>
                                                        <div class="col-sm-8 input-small-field">
                                                            <input type="text" name="mm" placeholder="MM" class="form-control required sm-margin-bottom-20">
                                                            <span class="slash">/</span>
                                                            <input type="text" name="yy" placeholder="YY" class="form-control required">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-4 no-col-space control-label">CSC</label>
                                                        <div class="col-sm-8 input-small-field">
                                                            <input type="text" name="number" placeholder="" class="form-control required">
                                                            <a href="#">What's this?</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="panel panel-default">
                                            <div class="panel-heading">
                                                <h4 class="panel-title">
                                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                                        <i class="fa fa-paypal"></i>
                                                        Pay with PayPal
                                                    </a>
                                                </h4>
                                            </div>
                                            <div id="collapseTwo" class="panel-collapse collapse">
                                                <div class="content margin-left-10">
                                                    <a href="#"><img src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/PP_logo_h_150x38.png" alt="PayPal"></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div> -->
                                    <img src="/public/assets/new/img/test.png" class="w-300" />
                                  </div>
                                <!-- End Accordion -->    
                            </div>

                            <!-- <div class="col-md-6">
                                <h2 class="title-type">Frequently asked questions</h2>
                                <div class="accordion-v2 plus-toggle">
                                    <div class="panel-group" id="accordion-v2">
                                        <div class="panel panel-default">
                                            <div class="panel-heading">
                                                <h4 class="panel-title">
                                                    <a data-toggle="collapse" data-parent="#accordion-v2" href="#collapseOne-v2">
                                                        What payments methods can I use?
                                                    </a>
                                                </h4>
                                            </div>
                                            <div id="collapseOne-v2" class="panel-collapse collapse in">
                                                <div class="panel-body">
                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit, felis vel tincidunt sodales, urna metus rutrum leo, sit amet finibus velit ante nec lacus. Cras erat nunc, pulvinar nec leo at, rhoncus elementum orci. Nullam ut sapien ultricies, gravida ante ut, ultrices nunc.
                                                </div>
                                            </div>
                                        </div>
                                        <div class="panel panel-default">
                                            <div class="panel-heading">
                                                <h4 class="panel-title">
                                                    <a data-toggle="collapse" data-parent="#accordion-v2" href="#collapseTwo-v2">
                                                        Can I use gift card to pay for my purchase?
                                                    </a>
                                                </h4>
                                            </div>
                                            <div id="collapseTwo-v2" class="panel-collapse collapse">
                                                <div class="panel-body">
                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit, felis vel tincidunt sodales, urna metus rutrum leo, sit amet finibus velit ante nec lacus. Cras erat nunc, pulvinar nec leo at, rhoncus elementum orci. Nullam ut sapien ultricies, gravida ante ut, ultrices nunc.    
                                                </div>
                                            </div>
                                        </div>
                                        <div class="panel panel-default">
                                            <div class="panel-heading">
                                                <h4 class="panel-title">
                                                    <a data-toggle="collapse" data-parent="#accordion-v2" href="#collapseThree-v2">
                                                        Will I be charged when I place my order?
                                                    </a>
                                                </h4>
                                            </div>
                                            <div id="collapseThree-v2" class="panel-collapse collapse">
                                                <div class="panel-body">
                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit, felis vel tincidunt sodales, urna metus rutrum leo, sit amet finibus velit ante nec lacus. Cras erat nunc, pulvinar nec leo at, rhoncus elementum orci. Nullam ut sapien ultricies, gravida ante ut, ultrices nunc.    
                                                </div>
                                            </div>
                                        </div>
                                        <div class="panel panel-default">
                                            <div class="panel-heading">
                                                <h4 class="panel-title">
                                                    <a data-toggle="collapse" data-parent="#accordion-v2" href="#collapseFour-v2">
                                                        How long will it take to get my order?
                                                    </a>
                                                </h4>
                                            </div>
                                            <div id="collapseFour-v2" class="panel-collapse collapse">
                                                <div class="panel-body">
                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit, felis vel tincidunt sodales, urna metus rutrum leo, sit amet finibus velit ante nec lacus. Cras erat nunc, pulvinar nec leo at, rhoncus elementum orci. Nullam ut sapien ultricies, gravida ante ut, ultrices nunc.    
                                                </div>
                                            </div>
                                        </div>    
                                    </div>
                                </div>
                            </div> -->
                        </div>
                    </section>

                    <div class="coupon-code">
                        <div class="row">
                            <div class="col-sm-4 sm-margin-bottom-30">
                                <!-- <h3>Discount Code</h3>
                                <p>Enter your coupon code</p>
                                <input class="form-control margin-bottom-10" name="code" type="text">
                                <button type="button" class="btn-u btn-u-sea-shop">Apply Coupon</button> -->
                            </div>
                            <div class="col-sm-3 col-sm-offset-5">
                                <ul class="list-inline total-result">
                                    <!-- <li>
                                        <h4>Subtotal:</h4>
                                        <div class="total-result-in">
                                            <span>$ 1280.00</span>
                                        </div>    
                                    </li>     -->
                                    <!-- <li>
                                        <h4>Shipping:</h4>
                                        <div class="total-result-in">
                                            <span class="text-right">- - - -</span>
                                        </div>
                                    </li> -->
                                    <li class="divider"></li>
                                    <li class="total-price">
                                        <h4>Total:</h4>
                                        <div class="total-result-in">
                                            <span id="cart-total-price">NTD$--</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>    
                </div>
            </form>
        </div><!--/end container-->
    </div>
    <!--=== End Content Medium Part ===-->     


    <script src="/public/assets/new/plugins/sky-forms/version-2.0.1/js/jquery.validate.min.js"></script>
    <script src="/public/assets/new/plugins/jquery-steps/build/jquery.steps.js"></script>
    <script src="/public/assets/new/js/forms/page_login.js"></script>
    <script src="/public/assets/new/js/plugins/stepWizard.js"></script>
    <script src="/public/assets/new/js/forms/product-quantity.js"></script>
    <script type="text/javascript" src="/public/assets/new/js/plugins/style-switcher.js"></script>
<script>
    jQuery(document).ready(function() {
        // App.init();
        Login.initLogin();
        StepWizard.initStepWizard();
        // StyleSwitcher.initStyleSwitcher();      
        calcTotal()

    //     var address = $('.addr-combobox').combobox({
    //       placeholder: '請選擇代存地址',
    //       editable: false,
    //       dataSource: [{
    //           name: '711（篤勝門市）', value: '0', addr: '基隆市七堵區大德路103號(07-222-2222)', zip: '200', city: '基隆'
    //       }, {
    //           name: '711（竹城門市）', value: '1', addr: '新竹市北區西門裡中山路100號', zip: '300', city: '新竹'
    //       }, {
    //           name: '全家（大東路店）', value: '2', addr: '臺北市士林區大東路63號1樓(0228834125)', zip: '100', city: '臺北'
    //       }, {
    //           name: '全家（天山店）', value: '3', addr: '臺北市士林區天母東路69巷11之9號1樓(0228769215)', zip: '100100', city: '臺北'
    //       }, {
    //           name: '全家（民雄神農店）', value: '4',addr: '嘉義縣民雄鄉三興村公園路370號壹樓', zip: '600', city: '嘉義'
    //       }],
    //       change: function(e, selectedItem) {
    //           console.log('--- change event ---');
    //           console.log(selectedItem, e);
    //       }
    //   });
    var markets = [{
        name: '711（篤勝門市）', value: '0', addr: '基隆市七堵區大德路103號', phone: '0228834125', zip: '200', city: '基隆'
    }, {
        name: '711（竹城門市）', value: '1', addr: '新竹市北區西門裡中山路100號', phone: '0228834124', zip: '300', city: '新竹'
    }, {
        name: '全家（大東路店）', value: '2', addr: '臺北市士林區大東路63號1樓', phone: '0228839125', zip: '100', city: '臺北'
    }, {
        name: '全家（天山店）', value: '3', addr: '臺北市士林區天母東路69巷11之9號1樓', phone: '0228769215', zip: '100100', city: '臺北'
    }, {
        name: '全家（民雄神農店）', value: '4',addr: '嘉義縣民雄鄉三興村公園路370號壹樓', phone: '0228707202', zip: '600', city: '嘉義'
    }]
    $('.filter-box').selectFilter({
        callBack : function (val){
            //返回選擇的值
            var selectMarkert = markets[val]
            $('#addr-address').val(selectMarkert.addr)
            $('#addr-phone').val(selectMarkert.phone)
            $('#addr-zip').val(selectMarkert.zip)
            $('#addr-city').val(selectMarkert.city)
        }
    });
    $('#syncbtn').on('click', function () {
        $('#addr-address').val($('#bill-address').val())
        $('#addr-phone').val($('#bill-phone').val())
        $('#addr-zip').val($('#bill-zip').val())
        $('#addr-city').val($('#bill-city').val())
        $('#addr-name').val($('#bill-name').val())
    })
});

function updateQty(goodsID, price, target) {
    // console.log(1, this, arguments)
    target.value = Math.max(parseInt(target.value) || 1, 1)
    addCart(goodsID, target.value, price, false)
}
</script>

{% endblock %}